---
title: Typography
description: Accessible styled typography components with an inheritance system.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedTypographyCode from '@rnr/reusables/components/ui/typography?raw';


<LinkButton href="https://rn-primitives.vercel.app/slot">
  Slot primitive
</LinkButton>
<LinkButton href="https://rn-primitives.vercel.app/types">
  Types primitive
</LinkButton>
<LinkButton target="_blank" href="https://rnr-showcase.vercel.app/typography">
  Demo
</LinkButton>

<br />

Semantic and styled typography components.

- `H1`
- `H2`
- `H3`
- `H4`
- `P`
- `BlockQuote`
- `Code`
- `Lead`
- `Large`
- `Small`
- `Muted`

## Installation

<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add typography
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type="tip" title="Dependencies">
        Before copy/pasting, add the <a href="https://rn-primitives.vercel.app/slot" className='text-white font-bold'>slot primitive</a> and <a href="https://rn-primitives.vercel.app/types" className='text-white font-bold'>types primitive</a> to your project.
    </Aside>

    **Copy/paste the following code to `~/components/ui/typography.tsx`:**

    <Code code={importedTypographyCode} lang="tsx" title="~/components/ui/typography.tsx" />
  </TabItem>
</Tabs>


#### Props and usage

Accepts all the props of the React-Native [`Text`](https://reactnative.dev/docs/text#props) component and is used the same way.